<template>
  <div class="content-box">
    <div class="content">
      <div class="group">
        <div class="header">
          <div class="title">组织机构</div>
          <div class="handler">
            <div class="showCode">
              <el-switch v-model="showCode" style="--el-switch-on-color: #54bcbd" /><span class="showCodeLabel">显示编码</span>
            </div>
          </div>
        </div>
        <div class="tree">
          <ZTree
            ref="zTreeRef"
            :id="treeId"
            :api="getOrgTree"
            :show-code="showCode"
            @click-dom="zTreeOnClick"
            @add-hover-dom="addHoverDom"
            @remove-hover-dom="removeHoverDom"
          />
        </div>
      </div>
      <div class="main">
        <div class="header">
          <div class="title">{{ dptName }}</div>
          <div class="refresh" @click="_refresh">刷新</div>
        </div>
        <div class="form" :model="dptDtl" v-loading="loading">
          <el-form label-position="top" :inline="true">
            <el-form-item class="formItem" label="HR部门号">
              <el-input placeholder="请输入HR部门号" v-model="dptDtl.orgunitid" />
            </el-form-item>
            <el-form-item class="formItem" label="部门名称">
              <el-input placeholder="请输入部门名称" v-model="dptDtl.orgunitname" />
            </el-form-item>
            <el-form-item class="formItem" label="部门全称">
              <el-input placeholder="请输入部门全称" v-model="dptDtl.orgunitfullname" disabled />
            </el-form-item>
            <el-form-item class="formItem" label="机构性质">
              <el-input placeholder="请输入机构性质" v-model="dptDtl.orgunitrole" />
            </el-form-item>
            <el-form-item class="formItem" label="机构级别">
              <el-input placeholder="请输入机构级别" v-model="dptDtl.orgunitlevel" />
            </el-form-item>
            <el-form-item class="formItem" label="机构类型">
              <el-input placeholder="请输入机构类型" v-model="dptDtl.orgunittype" />
            </el-form-item>
            <el-form-item class="formItem" label="业务系统">
              <el-input placeholder="请输入业务系统" v-model="dptDtl.orgunitattribute" />
            </el-form-item>
            <el-form-item class="formItem" label="地区分布">
              <el-input placeholder="请输入地区分布" v-model="dptDtl.orgunitgeozone" />
            </el-form-item>
            <el-form-item class="formItem" label="HR父部门号">
              <el-input placeholder="请输入HR父部门号" v-model="dptDtl.parentorgunitid" disabled />
            </el-form-item>
            <el-form-item class="formItem" label="部门/组织标识">
              <el-input placeholder="请输入部门/组织标识" v-model="dptDtl.hrorgdeptflag" />
            </el-form-item>
            <el-form-item class="formItem" label="排序号">
              <el-input placeholder="请输入排序号" v-model="dptDtl.enablestate" />
            </el-form-item>
            <el-form-item class="formItem" label="最后更新日期">
              <el-input placeholder="请输入最后更新日期" v-model="dptDtl.lastupdatedtime" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="footer">
          <el-button type="primary" :loading="loading1" @click="_save">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx" name="deptManage">
/* eslint-disable */
// @ts-nocheck
import { ref } from "vue";
import { ElMessage } from "element-plus";
import ZTree from "@/components/ZTree/index.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { getOrgTree } from "@/api/modules/common";
import { addDpt, editDpt, delDpt, getDptDtl } from "@/api/modules/cardIssuingCenter/deptManage";

const zTreeRef = ref();
const loading = ref(false);
const loading1 = ref(false);
const showCode = ref(false);
const isDeleting = ref(false);
const treeId = ref("tree");
const dptDtl = ref({});
const dptId = ref("");
const dptName = ref("");

/**
 * 保存部门详情
 */
const _save = async () => {
  const {
    displayorder,
    enablestate,
    hrorgdeptflag,
    lastupdatedtime,
    orgunitattribute,
    orgunitfullname,
    orgunitgeozone,
    orgunitid,
    orgunitlevel,
    orgunitname,
    orgunitrole,
    orgunittype,
    parentorgunitid
  } = dptDtl.value;

  const params = {
    orgUnitID: orgunitid,
    orgUnitName: orgunitname,
    orgUnitRole: orgunitrole,
    orgUnitLevel: orgunitlevel,
    orgUnitType: orgunittype,
    orgUnitAttribute: orgunitattribute,
    orgUnitGeoZone: orgunitgeozone,
    parentOrgUnitId: parentorgunitid,
    hrOrgDeptFlag: hrorgdeptflag,
    displayorder
  };
  loading1.value = true;
  try {
    await editDpt(params);
    ElMessage.success("保存成功");
    updateNode(orgunitid, orgunitname);
    loading1.value = false;
    getDtl(orgunitid);
  } catch (error) {
    loading1.value = false;
    console.log(error);
  }
};

/**
 * 刷新部门详情
 */
const _refresh = async () => {
  getDtl(dptId.value);
};

/**
 * 点击树节点
 */
const zTreeOnClick = ({ treeNode }) => {
  const id = treeNode.id;
  dptId.value = id;
  dptName.value = treeNode.name;
  getDtl(id);
};

/**
 * 树节点增加自定义hoverdom
 */
const addHoverDom = ({ treeId, treeNode }) => {
  const sObj = $("#" + treeNode.tId + "_span");
  if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
  const addStr = "<span class='hoverBtn addBtn' id='addBtn_" + treeNode.tId + "' title='增加' onfocus='this.blur();'></span>";
  const removeStr =
    "<span class='hoverBtn removeBtn' id='removeBtn_" + treeNode.tId + "' title='删除' onfocus='this.blur();'></span>";
  const sObjItem = treeNode.parentId ? addStr + removeStr : addStr;
  sObj.after(sObjItem);
  const addBtn = $("#addBtn_" + treeNode.tId);
  const removeBtn = $("#removeBtn_" + treeNode.tId);
  if (addBtn)
    addBtn.bind("click", function () {
      addNode(treeId, treeNode);
      return false;
    });
  if (removeBtn)
    removeBtn.bind("click", function () {
      removeNode(treeId, treeNode);
      return false;
    });
};

/**
 * 树节点删除自定义hoverdom
 */
const removeHoverDom = ({ treeNode }) => {
  $("#addBtn_" + treeNode.tId)
    .unbind()
    .remove();
  $("#editBtn_" + treeNode.tId)
    .unbind()
    .remove();
  $("#removeBtn_" + treeNode.tId)
    .unbind()
    .remove();
  $("#uploadBtn_" + treeNode.tId)
    .unbind()
    .remove();
};

/**
 * 移除树节点
 */
const removeNode = (treeId, treeNode) => {
  if (!isDeleting.value) {
    useHandleData(delDpt, { orgUnitID: treeNode.id }, `删除该组织机构`, "系统提示").then(() => {
      isDeleting.value = true;
      const zTree = $.fn.zTree.getZTreeObj(treeId);
      zTree.removeNode(treeNode, true);
      isDeleting.value = false;
      zTreeRef.value.refresh();
    });
    return false;
  } else {
    return true;
  }
};

/**
 * 更新树节点
 */
const updateNode = (dptno, dptname) => {
  const zTree = $.fn.zTree.getZTreeObj(treeId.value);
  let nodes = zTree.getSelectedNodes();
  for (let i = 0, l = nodes.length; i < l; i++) {
    nodes[i].name = dptname;
    nodes[i].no = dptno;
    zTree.updateNode(nodes[i]);
  }
};

/**
 * 新增树节点
 */
const addNode = async (treeId, treeNode) => {
  const zTree = $.fn.zTree.getZTreeObj(treeId);
  try {
    const res = await addDpt({ parentOrgUnitId: treeNode.id, level: treeNode.level + 1 });
    const { orgUnitID, orgUnitName, parentOrgUnitId } = res.data;
    zTree.addNodes(treeNode, { id: orgUnitID, pId: parentOrgUnitId, name: orgUnitName, no: orgUnitID });
    const node = zTree.getNodeByParam("id", orgUnitID);
    zTree.selectNode(node);
    $("#" + node.tId + "_a").click();
    dptName.value = orgUnitName;
    getDtl(orgUnitID);
  } catch (error) {
    console.log(error);
  }
};

/**
 * 获取部门详情
 */
const getDtl = async orgUnitID => {
  loading.value = true;
  try {
    const res = await getDptDtl({ orgUnitID });
    dptDtl.value = res.data;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
